import React, { Component } from 'react'
import moment from 'moment'
import { USER_INFO } from '@/Utils/CONST'

import './index.less'

export default class BaseInfo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      detail: props.detail,
    }
  }
  componentWillReceiveProps(props) {
    this.setState({
      detail: props.detail,
    })
  }

  render() {
    const { detail } = this.state
    const userInfo = JSON.parse(localStorage.getItem(USER_INFO) || '{}')
    const _type = userInfo && userInfo.userType || 'ignore'
    const timeVisible = _type !== 'GOVERNMENT_CUSTOMER' // 政企用户不显示到期时间
    const obj = {
      domain: {
        label: '域名',
        value: detail.domain,
      },
      // region: {
      //   label: '地域',
      //   value: detail.region,
      // },
      id: {
        label: '创建ID',
        value: detail.name,
      },
      isGuomi: {
        label: '国密算法',
        value: detail.isGuomi === 1 ? '支持' : '不支持',
      },
      nodeNum: {
        label: '节点数',
        value: detail.nodeNum,
      },
      type: {
        label: '组织类型',
        value: detail.type,
      },
      consortiumName: {
        label: '所属联盟',
        value: detail.consortiumName,
      },
      channels: {
        label: '所属通道',
        value: detail.channels ? detail.channels.join('、') : '暂无通道',
      },
      createTime: {
        label: '创建时间',
        value: detail.createTime ? moment(detail.createTime).format('YYYY.MM.DD HH:mm:ss') : '',
      },
      dueDate: {
        label: '到期时间',
        value: timeVisible ? ((detail.dueDate && moment(detail.dueDate).format('YYYY.MM.DD HH:mm:ss')) || '-') : '-',
      },
      description: {
        label: '描述',
        value: detail.description,
      },
    }
    return (
      <div className="base-info">
        <div className="container">
          <div className="org-name-wrap">
            <div className="org-name">
              {detail.name}
            </div>
            {
              JSON.stringify(detail) !== '{}'
                ? <div className={'tag tag-base'}>
                  {'标准版'}
                </div>
                : null
            }
            {
              detail.status === 'CREATING'
                ? <span className="status">
                  <img src={require('../../../../../../images/org/icon_creacting.svg')} />
                                    创建中
                </span>
                : null
            }
          </div>
          {
            Object.keys(obj).map(element => {
              return (
                <div key={element} className="form-item">
                  <div className="label">{obj[element].label}</div>
                  <div className="item">{obj[element].value || '暂无'}</div>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }
}
